<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div class="btn">
			https://mp.weixin.qq.com/s/LgwTCzBgYWBe2JFXg8YMtQ<br />
			scroll 事件本身会触发页面的重新渲染，<br />
			同时 scroll 事件的 handler 又会被高频度的触发, <br />
			因此事件的 handler 内部不应该有复杂操作，<br />
			例如 DOM 操作就不应该放在事件处理中。<br />

			针对此类高频度触发事件问题<br />
			（例如页面 scroll ，屏幕 resize，监听用户输入等）<br />
			，下面介绍两种常用的解决方法，防抖和节流。<br />
		</div>
	</head>
	<body>
		<style>
			.btn{
				height: 2000px;
			}
		</style>
		 <script>
			// 防抖动函数
			function debounce(func, wait, immediate) {
				var timeout;
				return function() {
					var context = this, args = arguments;
					var later = function() {
						timeout = null;
						if (!immediate) func.apply(context, args);
					};
					var callNow = immediate & !timeout;
					clearTimeout(timeout);
					timeout = setTimeout(later, wait);
					if (callNow) func.apply(context, args);
				};
			};
	
			var myEfficientFn = debounce(function() {
				console.log("Success真正的操作");
				// 滚动中的真正的操作
			}, 250);
	
			// 采用了防抖动
			window.addEventListener('scroll',myEfficientFn );
			// 没采用防抖动
			// window.addEventListener('scroll',realFunc);
	
			 
		 </script>
	</body>
	
</html>
